<template>
    <div>
        <div class="title">维护人员：</div>
        <el-tag
            :key="tag.ldap.username"
            v-for="tag in shareList"
            closable
            :disable-transitions="false"
            style="height: 36px;line-height: 36px"
            @close="handleClose(tag)">
            {{tag.ldap.cn_name}}
        </el-tag>
        <span v-if="tagVisible" style="margin-left: 10px">
            <!-- <el-select ref="saveTagInput" v-model="tagValue" filterable placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name + '/' + item.ldap"
                :value="item.ldap">
                </el-option>
            </el-select> -->
            <el-select
                v-model="tagValue"
                filterable
                remote
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right">{{ item.value }}</span>
                </el-option>
            </el-select>
            <!-- <label for="cascader">选择项目:</label>
                  <el-cascader
                    clearable
                    placeholder="请选择"
                    :options="selector"
                    filterable
                    :show-all-levels="false"
                    :collapse-tags="true"
                    v-model="selected"
                    @change="changeProject"
                    :props="props"
                    style="margin-left: 10px; width:12%"
                    id="cascader"
                    >
                  </el-cascader> -->
            <el-button class="button-new-tag" type="success" @click="handleInputConfirm">确定</el-button>
            <el-button class="button-new-tag" type="info" @click="handleInputCancel">取消</el-button>
        </span>
        <el-button v-else class="button-new-tag" type="primary" @click="showInput">+ 新增</el-button>
    </div>
</template>

<script>
import { getHeaderName } from '@/app.config'
import http from '@/views/sys/axios';

export default {
    name: 'Talent',
    props: {
      shareId: String
    },
    data() {
        return {
            othername:'',
            // shareId1: [],
            props: { multiple: true },
            selected: null,
            selector: [],
            shareList: [],
            tagVisible: false,
            tagValue: [],
            options: [],
            loading: false
        }
    },
    mounted() {
        // this.initOptions()
        this.initTable()
        // this.getOptionsResult()
    },
    methods: {
        getOptions() {
          return http.get(`/api/account/user/query?name=`)
        },
        async getOptionsResult() {
          try {
              const { code, project_list } = await this.getOptions()
              if(code === 200) {
                this.selector = project_list
              }
          } catch (err) {
              throw new Error(err)
          }
        },
        changeProject(val) {  
            let proIdList = []
            val.forEach(item => {
                proIdList.push(item[2])
            })
            // this.shareId1 = proIdList // id
            let arr = this.selector   
            },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.$axios({
                        url: process.env.VUE_APP_KANBAN_HOST + '/api/account/user/query?name=' + query,
                        method: "get",
                        headers: getHeaderName(),
                    }).then(res => {
                        this.options = res.data.user_list
                    })
                }, 200);
            } else {
                this.options = [];
            }
        },
        clearSelect() {
            // console.log(999)
            this.options = [];
        },
        initTable() {
            this.$axios({
                url: process.env.VUE_APP_KANBAN_HOST + '/api/data_summary/car/roll/collaboration',
                method: "get",
                headers: getHeaderName(),
                params: {
                    project_id: this.shareId
                }
            }).then(res => {
                // console.log("res",res)
                this.shareList = res.data.data
            })
        },
        initOptions(val) {
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/list?keywords=' + val,
                method: "get",
                headers: getHeaderName(),
            }).then(res => {
                this.options = res.data.data
            })
        },
        handleClose(tag) {
            this.$axios({
                url: `${process.env.VUE_APP_KANBAN_HOST}/api/data_summary/car/roll/collaboration`,
                method: "delete",
                data: {
                  ldap : tag.ldap.username,
                  project_id: this.shareId,
                },
                headers: getHeaderName(),
            }).then(res => {
              const {msg, success} = res.data
              if(success) {
                  this.$message.success(msg)
                  this.tagVisible = false;
                  this.tagValue = '';
                  this.initTable()
              } else {
                  this.$message.error(msg)
              }
            })
        },

        showInput() {
            this.tagVisible = true;
        },
        handleInputCancel() {
            this.tagVisible = false;
            this.tagValue = '';
        },
        // 确定
        handleInputConfirm() {
            let tagValue = this.tagValue;
            if (tagValue) {
                this.$axios({
                    url: process.env.VUE_APP_KANBAN_HOST + '/api/data_summary/car/roll/collaboration',
                    method: "post",
                    headers: getHeaderName(),
                    data: { ldap : this.tagValue, project_id: this.shareId}
                }).then(res => {
                  const {msg, success} = res.data
                  if(success) {
                      this.$message.success(msg)
                      this.tagVisible = false;
                      this.tagValue = '';
                      this.initTable()
                  } else {
                      this.$message({
                          type:"error",
                          message: "添加失败"
                      })
                  }
                })
            }
            
        }

    },
    watch: {

    }
}
</script>
<style lang="scss" scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 36px;
    line-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .title {
      font-size: 16px;
      margin-bottom: 20px;
  }
</style>


